<template>
    <view class="biz-list" >
		<view v-for="(item) in data" class="biz-list__item" hover-class="biz-list__hover" :key="item.key" @click="handleClick(item)">
			<view class="biz-list__title">{{ item.name }}</view>
			<view class="biz-list__info">
				<view v-if="item.author" class="biz-list__grid">
					<image
					class="biz-list__icon"
						src="@/static/user.png"
						mode="scaleToFill"
					/>
					{{ item.author }}</view>
				<view v-if="item.date" class="biz-list__grid">
					<image
					class="biz-list__icon"
						src="@/static/clock.png"
						mode="scaleToFill"
					/>
					{{ item.date }}</view>
			</view>
		</view>
		<view @click="handleDevClick" class="biz-list__dev"></view>
    </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import request from '@/request'
import { onPullDownRefresh } from '@dcloudio/uni-app';
import { showToast } from '@/utils/helper'
import navigator from '@/utils/navigator';
import { uniqueId } from 'lodash-es'
const props = defineProps<{bizType: 'arithmetic' | 'base' | 'interview' | 'other' }>()
type IData = { name:string, url: string; date?:string ; author?:string; key: string}
const data = ref<Array<IData>>([])
onMounted(() => {
    fetchData()
})
const fetchData = async () => {
    return request<Array<IData>, any>({
        url: `https://gitee.com/superscore/interview-app/raw/main/static/${props.bizType}.json`
    }).then((res?: Array<IData>) => {
        data.value = (res || []).map(item=>({ ...item, key: uniqueId('key_') }))
    })
}
const handleDevClick =() => {
	uni.getSystemInfo({
		success(ret) {
			uni.showToast({
				icon: 'none',
				title:`版本名称：${ret.browserName}  版本号：${ret.browserVersion}`
			})
		}
	})
}
onPullDownRefresh(() => {
    fetchData().then(() => {
        showToast('刷新成功')
    }).catch(() => {
        showToast('刷新失败，请稍后重试')
    }).finally(() => {
        uni.stopPullDownRefresh()
    })
})
const handleClick = (item:IData) => {
    console.log('f,das')
    navigator.navigateTo({
        url: '/pages/webview/index',
        query: item
    })
}

</script>

<style scoped lang="scss">
.biz-list {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-bottom: 32rpx;
    &__item {
        padding: 20rpx 24rpx;
        background-color: #fff;
        border-bottom: solid 1rpx #eeeeee;
        font-size: 30rpx;
        color: $uni-text-color;
        &:last-child {
            border-bottom: none;
        }
    }
    &__title {
        line-height: 48rpx;
        display: -webkit-box; /* Safari */
        -webkit-line-clamp: 2; /* Safari */
        -webkit-box-orient: vertical; /* Safari */
        overflow: hidden;
		min-height: 80rpx;
        max-height: 100rpx;
    }
    &__info {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 24rpx;
        color: $uni-text-color-grey;
        padding-top: 22rpx;
    }
    &__grid {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    &__icon {
        width: 24rpx;
        height: 24rpx;
        margin-right: 6rpx;
    }
    &__hover {
        opacity: 0.8;
    }
	&__dev {
		height: 50rpx;
	}
}
</style>